use log::trace;
use yew::prelude::*;
use yew_store::StoreLink;

use crate::state::{Action, Event, Post, State};
use crate::views::Counters;

use crate::service::{self, FetchTask};
use failure::Error;

pub struct Model {
    store: StoreLink<State, Action>,
    link: ComponentLink<Self>,
    task: Option<FetchTask>,
    post: Option<String>,
}

pub enum Msg {
    StoreEvent(Event),
    FetchTask,
    FetchDone(Result<Post, Error>),
}

#[derive(Properties)]
pub struct Props {
    #[props(required)]
    pub store: StoreLink<State, Action>,
}

impl Component for Model {
    type Message = Msg;
    type Properties = Props;

    fn create(props: Self::Properties, mut link: ComponentLink<Self>) -> Self {
        let callback = link.send_back(|event| Msg::StoreEvent(event));
        Model {
            store: props.store.reform(Some(callback)),
            link: link,
            task: None,
            post: None,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::StoreEvent(event) => return self.handle(event),
            Msg::FetchTask => {
                self.task = service::fetch_post(self.link.send_back(|resp| Msg::FetchDone(resp)));
                false
            }
            Msg::FetchDone(resp) => {
                trace!("{:?}", resp);
                self.post = Some(format!("{:?}", resp));
                true
            }
        }
    }
}
impl Model {
    fn handle(&mut self, event: Event) -> ShouldRender {
        trace!("{:?}", event);
        false
    }
}

impl Renderable<Model> for Model {
    fn view(&self) -> Html<Self> {
        html! {
            <section class="hero is-link is-fullheight">
                <div class="hero-body">
                    <div class="container">
                        <div class="columns is-centered">
                            <div class="column is-narrow">
                                <h1 class="title has-text-centered"> { "Hello, Counters" } </h1>
                            </div>
                        </div>
                        <div class="columns is-centered">
                            <div class="column is-narrow">
                                <Counters store=self.store.clone() />
                            </div>
                        </div>
                        <div class="columns is-centered">
                            <div class="column is-narrow">
                                <Counters store=self.store.clone() />
                            </div>
                        </div>
                        <div class="columns is-centered">
                            <div class="column is-narrow">
                                <button class="button is-primary" onclick=|_| Msg::FetchTask>{"Fetch Post"}</button>
                            </div>
                        </div>
                        <div class="columns is-centered">
                            <div class="column">
                                <div class="notification is-warning">
                                    <p class="has-text-centered">{format!("{:?}", self.post)}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        }
    }
}
